<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表和表格</title>
    <style>
        ol{
            /*列表默认会有40px的内边距*/
            padding: 20px;

            /*设置列表样式*/
            /*list-style: none;*/

            /*设置列表样式的类型*/
            list-style: square;
        }

        table{
            border:1px solid gray;

            border-spacing: 5px;
            /*border-collapse:;*/
            border-collapse: collapse;

        }
        thead{
            background-color: gray;
        }

        td{
            border:1px solid gray;
            padding: 5px;  
            height: 2rem; 
            width: 4rem;     
        }

        th{
            height: 2rem;
        }
    
    </style>

</head>
<body>
    <h3>有序列表</h3>
    <ol>
        <li>HTML5</li>
        <li>CSS3 </li>
        <li>JavaScript</li>
        <li>Python</li>
    </ol>

    <ul>
        <!--使用zen-Coding 神编码.安装Emmet插件-->
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>

        <!--(li>span)*3-->
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>

        <!--(li+span)*3-->
        <li></li>
        <span></span>
        <li></li>
        <span></span>
        <li></li>
        <span></span>

        <h3>表格</h3>
        <!--
            table用来定义一个表格,
            caption用来定义表格的标题.
            thead用来定义表格的表头
            th用来定义表头中每一格的信息
            tr代表往表格中插入一行
            td代表往行内插入列
            rowspan设置横跨n行
            colspan设置纵跨n列
        -->
        <table>
            <caption>标题</caption>

            <thead>
                <th>时间</th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
                <th>周六</th>
                <th>周日</th>
            </thead>

            <tr>
                <td>上午</td>
                <td>html5</td>
                <td>html5</td>
                <td>html5</td>
                <td>html5</td>
                <td>html5</td>
                <td>html5</td>
                <td>html5</td>
            </tr>

            <tr>
                <td>下午</td>
                <td>html5</td>
                <td>html5</td>
                <td>html5</td>
                <td>html5</td>
                <td>html5</td>
                <td>html5</td>
                <td>html5</td>
            </tr>

            <tr>
                <td>晚上</td>
                <td>html5</td>
                <td>html5</td>
                <td>html5</td>
                <td>html5</td>
                <td>html5</td>
                <td>html5</td>
                <td>html5</td>
            </tr>
        </table>

    </ul>
</body>
</html>